.start-screen-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* Full viewport height */
  text-align: center;
  /* background-color: #f0f0f0;  Old background */
  background: linear-gradient(135deg, #6e8efb, #a777e3); /* Gradient background */
  color: white; /* Text color for better contrast */
  font-family: 'Arial', sans-serif; /* Nicer font */
}

h1 {
  /* color: #333; Old color */
  color: white; /* White title */
  margin-bottom: 40px; /* Increased margin */
  font-size: 3em; /* Larger title */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Text shadow for depth */
}

.start-button {
  padding: 18px 35px; /* Slightly larger padding */
  font-size: 1.4em; /* Larger font size */
  cursor: pointer;
  /* background-color: #007bff; Old blue button */
  background-color: #ff6b6b; /* Vibrant button color */
  color: white;
  border: none;
  border-radius: 8px; /* More rounded corners */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform transition */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Button shadow */
}

.start-button:hover {
  /* background-color: #0056b3; Old darker blue */
  background-color: #ee5253; /* Darker vibrant color on hover */
  transform: translateY(-2px); /* Slight lift effect on hover */
}

.start-button:active {
  transform: translateY(1px); /* Press down effect */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); /* Smaller shadow when active */
}